<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>Hello</title>
    <%@include file="/pages/icon.html" %>
    <link href="/css/home.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/limonte-sweetalert2/7.21.1/sweetalert2.all.min.js"></script>
</head>
<body>

<%--头部--%>
<jsp:include page="/pages/top.jsp"></jsp:include>

<%--BiYing图片--%>
<div id="biYing">
    <div class="container-fluid" id="biYingTitle">
        <div class="col-md-12 col-sm-12">
            <h3></h3>
            <button id="proImgBtn" type="button" class="btn btn-primary"><i class="glyphicon glyphicon-chevron-left"></i> 前一天</button>&nbsp;
            <button id="nextImgBtn" type="button" class="btn btn-success">后一天 <i class="glyphicon glyphicon-chevron-right"></i></button>&nbsp;
            <button id="saveImgToLocalBtn" type="button" class="btn btn-warning">保存到本地</button>&nbsp;
            <button id="saveImgToRemotoBtn" type="button" class="btn btn-danger">保存到服务器</button>
        </div>
    </div>
</div>
<%--音乐巨幕--%>
<div class="container" style="opacity: 0.7">
    <div class="jumbotron rbjMusic">
        <button class="btn btn-link btn-xs btn-block rbjJingDuTiaoColor" type="button" data-toggle="collapse"
                data-target="#collapseExample" onclick="changeMusicTitle()">
            <div class="progress rbjJingDuTiao">
                <div class="progress-bar progress-bar-striped progress-bar-default active rbjJingDuTiaoColor"
                     style="width: 100%">
                    <span id="musicTitle">💋 确认过眼神</span>
                </div>
            </div>
        </button>
        <div class="collapse" id="collapseExample">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item"
                        src="http://music.163.com/outchain/player?type=0&id=938880810&auto=0">
                </iframe>
            </div>
        </div>
    </div>
</div>
<%--网站底部--%>
<div class="jumbotron rbjJumFoot" style="opacity: 0.9">
    <div class="container">
        <div class="row">
            <div class="col-md-5">
                <h4>
                    <i class="glyphicon glyphicon-globe">
                        <a href="/pages/siteInfo.jsp" target="_blank">关于</a>
                    </i>
                    &emsp;&emsp;&emsp;
                    <i class="glyphicon glyphicon-comment">
                        <a href="http://wpa.qq.com/msgrd?v=3&uin=2013142083&site=qq&menu=yes" target="_blank">联系我</a>
                    </i>
                </h4>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-sm-12" id="rbjFriendLinks">
                <i class="glyphicon glyphicon-link"> 友情链接:</i>&emsp;&emsp;
            </div>
        </div>
        <br>
        <hr style="border:none;border-top:1px dashed #A2A2A2;"/>
        <div class="row">
            <div class="col-sm-12" id="rbjFriendLinksHaveLogo"></div>
        </div>
        <hr style="border:none;border-top:1px dashed #A2A2A2;"/>
        <%--dashed--%>
        <br>
        &copy;2018&nbsp;&minus;&nbsp;Hello520.vip&emsp;备案号：<a href="http://www.miitbeian.gov.cn" target="_blank">湘ICP备17018834号</a>
    </div>
</div>
<i id="demo"></i>
<%--回顶部--%>
<button type="button" class="btn btn-success rbjToTop">
    <span class="glyphicon glyphicon-menu-up"></span>
</button>

<%--获取必应图片并渲染成背景--%>
<script>
    function getBiYingImg(imgIndex) {
        $.ajax({
            type: "GET",
            url: "/biYing.do?imgIndex=" + imgIndex,
            // data: "",
            dataType: "json",
            async: true,
            success: function (data) {
                $("#biYing").height(document.body.clientHeight);
                // 图片title
                $("#biYing h3").text(data.copyright);
                $("body").css({
                    "background": "url(" + data.imgUrl + ")",
                    "backgroundAttachment": "fixed"
                });
            }
        });
    }
</script>
<%--前一天 后一天 保存到本地 & 服务器--%>
<script>
    // 当前图片索引
    var currentIndex = 0;

    // 前一天图片按钮
    $("#proImgBtn").click(function () {
        currentIndex += 1;
        if (currentIndex > 7) {
            swal({
                title: '<i style="text-decoration: line-through">过去的就让她过去</i>',
                html:'<i style="text-decoration: line-through; font-style: italic">成为远远的远</i>',
                //warning，error，success，info和question
                type: 'info',
                background:'#DCDFE6',
                animation: true,
                showConfirmButton: false,
                timer: 2000
            });
            currentIndex += -1;
            return;
        }
        getBiYingImg(currentIndex);
    });

    // 后一天图片按钮
    $("#nextImgBtn").click(function () {
        currentIndex += -1;
        if (currentIndex < -1) {
            swal({
                title: '明天很美',
                html:'<i style="color: #606266; font-style: normal; font-weight: bold">但愿后天也是</i>',
                //warning，error，success，info和question
                type: 'info',
                background:'#F56C6C',
                animation: true,
                showConfirmButton: false,
                timer: 2000
            });
            currentIndex += 1;
            return;
        }
        getBiYingImg(currentIndex);
    })

    // 保存到本地
    $("#saveImgToLocalBtn").click(function () {
        window.location.href = '/saveImgToLocal.do?imgIndex=' + currentIndex;
    });
    
    // 保存到服务器
    $("#saveImgToRemotoBtn").click(function () {
        var imgUrl = $("body").css("backgroundImage").replace('url(', '').replace(')', '').replace(new RegExp('\"', 'g'), '');
        var imgTxt = $("#biYing h3").text();
        var name = imgTxt.split('(')[0];
        swal({
            title: '确定保存?',
            text: name,
            //warning，error，success，info和question
            // type:'',
            imageUrl: imgUrl,
            imageWidth: 400,
            imageHeight: 200,
            imageAlt: name,
            animation: true,
            showCancelButton: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }).then(function (result) {
            if (result.value) {
                $.ajax({
                    type: "GET",
                    url: "/saveImgToRemoto.do?imgIndex=" + currentIndex,
                    // data: "",
                    dataType: "json",
                    async: true,
                    success: function (dat) {
                        if (dat.state == 0) {
                            swal(
                                '保存成功',
                                '\"' + name + '\" 已送达服务器',
                                'success'
                            );
                        } else {
                            swal(
                                '保存失败',
                                dat.message,
                                'error'
                            );
                        }
                    },
                    error: function (dat) {
                        swal(
                            '保存失败',
                            dat.message,
                            'error'
                        );
                    }
                });
            } else {
                return;
            }
        })
    });
</script>
<%--回顶部 和 必应title--%>
<script>
    $(window).scroll(function () {
        // 回顶部按钮
        if ($(window).scrollTop() >= 250) {
            $('.rbjToTop').slideDown();
        } else {
            $('.rbjToTop').fadeOut();
        }
        // 必应title
        if ($(window).scrollTop() < 100) {
            $('#biYingTitle').fadeIn();
        } else {
            $('#biYingTitle').fadeOut();
        }
    });
    $('.rbjToTop').click(function () {
        $(window).scrollTop(0.0);
    });
</script>
<%--彩蛋--%>
<script>
    var count = 0;
    document.onkeydown = function () {
        if (event.keyCode == 37) {
            count += 37;
            toExpress(count);
            return;
        }
        if (event.keyCode == 37) {
            count += 37;
            toExpress(count);
            return;
        }
        if (event.keyCode == 38) {
            count += 38;
            toExpress(count);
            return;
        }
        if (event.keyCode == 38) {
            count += 38;
            toExpress(count);
            return;
        }
        if (event.keyCode == 39) {
            count += 39;
            toExpress(count);
            return;
        }
        if (event.keyCode == 39) {
            count += 39;
            toExpress(count);
            return;
        }
        if (event.keyCode == 40) {
            count += 40;
            toExpress(count);
            return;
        }
        if (event.keyCode == 40) {
            count += 40;
            toExpress(count);
            return;

        }

    };

    function toExpress(count) {
        if (count == 308) {
            window.open("/pages/express.html");
            count = -1;
        }
    }
</script>
<%--音乐三目运算--%>
<script>
    function changeMusicTitle() {
        var str = $("#musicTitle").text();
        if (str) {
            $("#musicTitle").text(str == "💋 确认过眼神" ? "我遇见对的人 💋" : "💋 确认过眼神");
        }
    }
</script>
<%--加载页面初始化--%>
<script>
    $(function () {
        // 获取友情链接
        $.ajax({
            type: "GET",
            url: "/friendLinks.do",
            // data: "",
            dataType: "json",
            async: true,
            success: function (data) {
                var linksHtml = "";
                var linksHtmlHaveLogo = "";
                $.each(data, function (i, k) {

                    if (null != k.logo) {
                        var logo = k.logo;
                        linksHtmlHaveLogo += '<a href=' + k.url + ' target="_blank"><img src=' + logo + ' height="30" alt="阿里云服务器"/></a>&emsp;&emsp;';
                    } else {
                        linksHtml += "<a href=" + k.url + ' target="_blank">' + k.name + '</a>&emsp;';
                    }
                });
                $("#rbjFriendLinks").append(linksHtml);
                $("#rbjFriendLinksHaveLogo").append(linksHtmlHaveLogo);
            }
        });

        // 获取必应图片并渲染成背景
        getBiYingImg(0);
    });
</script>
</body>
</html>
